<template>
  <el-container style="height: 100vh">
    <!-- 顶部导航栏 -->
    <el-header style="background: #1f2d3d; color: white; text-align: center; font-size: 24px">
      实时选股监控系统
    </el-header>

    <el-container>
      <!-- 左侧筛选条件 -->
      <el-aside width="250px" style="background: #f5f7fa; padding: 10px">
        <FilterPanel @apply-filters="applyFilters" />
      </el-aside>

      <!-- 中间实时股票列表 -->
      <el-main style="background: #ffffff; padding: 10px">
        <StockTable :stocks="stocks" />
      </el-main>

      <!-- 右侧重要指标 -->
      <el-aside width="300px" style="background: #f0f2f5; padding: 10px">
        <MarketOverview />
      </el-aside>
    </el-container>

    <!-- 底部数据概览 -->
    <el-footer style="background: #1f2d3d; color: white; text-align: center">
      数据更新时间：{{ lastUpdated }}
    </el-footer>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import FilterPanel from '@/components/FilterPanel.vue'
import StockTable from '@/components/StockTable.vue'
import MarketOverview from '@/components/MarketOverview.vue'

const stocks = ref([])
const lastUpdated = ref('')

const applyFilters = (filters) => {
  console.log('应用筛选条件:', filters)
}

onMounted(() => {
  const ws = new WebSocket('ws://localhost:8000/ws')

  ws.onmessage = (event) => {
    stocks.value = JSON.parse(event.data)
    lastUpdated.value = new Date().toLocaleString()
  }
})
</script>

<style>
body {
  margin: 0;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background-color: #eef1f6;
}
</style>
